<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('有声读物列表')" />
  </head>
  <body class="gray-bg">
    <div class="container-div">
      <div class="row">
        <div class="col-sm-12 search-collapse">
          <form id="formId">
            <div class="select-list">
              <ul>
                <li>
                  <label>读物标题：</label>
                  <input type="text" name="title" />
                </li>
                <li>
                  <label>朗读者：</label>
                  <input type="text" name="narrator" />
                </li>
                <li>
                  <label>分类：</label>
                  <input type="text" name="category" />
                </li>
                <li>
                  <label>状态：</label>
                  <select name="status">
                    <option value="">所有</option>
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                  </select>
                </li>
                <li>
                  <a
                    class="btn btn-primary btn-rounded btn-sm"
                    onclick="$.table.search()"
                    ><i class="fa fa-search"></i>&nbsp;搜索</a
                  >
                  <a
                    class="btn btn-warning btn-rounded btn-sm"
                    onclick="$.form.reset()"
                    ><i class="fa fa-refresh"></i>&nbsp;重置</a
                  >
                </li>
              </ul>
            </div>
          </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
          <a
            class="btn btn-success"
            onclick="$.operate.add()"
            shiro:hasPermission="dj:audio:book:add"
          >
            <i class="fa fa-plus"></i> 新增
          </a>
          <a
            class="btn btn-primary single disabled"
            onclick="$.operate.edit()"
            shiro:hasPermission="dj:audio:book:edit"
          >
            <i class="fa fa-edit"></i> 修改
          </a>
          <a
            class="btn btn-danger multiple disabled"
            onclick="$.operate.removeAll()"
            shiro:hasPermission="dj:audio:book:remove"
          >
            <i class="fa fa-remove"></i> 删除
          </a>
          <a
            class="btn btn-warning"
            onclick="$.table.exportExcel()"
            shiro:hasPermission="dj:audio:book:export"
          >
            <i class="fa fa-download"></i> 导出
          </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
          <table id="bootstrap-table"></table>
        </div>
      </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:src="@{/ruoyi/js/study-time-recorder.js}"></script>
    <script th:inline="javascript">
           var editFlag = [[${@permission.hasPermi('dj:audio:book:edit')}]];
           var removeFlag = [[${@permission.hasPermi('dj:audio:book:remove')}]];
           var prefix = ctx + "dj/audio/book";

           	// 页面加载完成后自动开始记录学习时长
      $(document).ready(function() {
      	// 开始记录有声读物模块的学习时长
      	StudyTimeRecorder.startAudio(0, {
            title: '有声读物模块',
            onSuccess: function() {
                console.log('开始有声读物模块学习记录');
            }
        });
      });

      // 页面卸载时结束学习记录（使用同步方法）
      $(window).on('beforeunload', function() {
      	if (StudyTimeRecorder.isStudying()) {
            StudyTimeRecorder.endSync();
        }
      });

      $(function() {
      	var options = {
           		url: prefix + "/list",
           		createUrl: prefix + "/add",
           		updateUrl: prefix + "/edit/{id}",
           		removeUrl: prefix + "/remove",
           		exportUrl: prefix + "/export",
           		modalName: "有声读物",
           		columns: [{
           			checkbox: true
           		},
           		{
           			field: 'id',
           			title: '有声读物ID'
           		},
           		{
           			field: 'title',
           			title: '读物标题'
           		},
           		{
           			field: 'coverUrl',
           			title: '封面图片',
           			formatter: function(value, row, index) {
           				if (value) {
           					return '<img src="' + value + '" style="width:100px;height:60px;" />';
           				} else {
           					return '无封面';
           				}
           			}
           		},
           		{
           			field: 'narrator',
           			title: '朗读者'
           		},
           		{
           			field: 'duration',
           			title: '音频时长(秒)'
           		},
           		{
           			field: 'category',
           			title: '分类'
           		},
           		{
           			field: 'listenCount',
           			title: '收听次数'
           		},
           		{
           			field: 'status',
           			title: '状态',
           			align: 'center',
           			formatter: function(value, row, index) {
           				if (value == 1) {
           					return '<span class="badge badge-primary">启用</span>';
           				} else {
           					return '<span class="badge badge-danger">禁用</span>';
           				}
           			}
           		},
           		{
           			field: 'createTime',
           			title: '创建时间'
           		},
           		{
           			title: '操作',
           			align: 'center',
           			formatter: function(value, row, index) {
           				var actions = [];
           				actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
           				actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
           				return actions.join('');
           			}
           		}]
           	};
           	$.table.init(options);
           });
    </script>
  </body>
</html>
